<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jQuery Slot Machine</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2.0">
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

		<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="src/jquery.slotmachine.js"></script>
	</head>
	<body>
<!-- 		<div id="header">
			<table cellpadding="0" cellspacing="0">
				<tr>
					<td align="center">
						<div class="content">
							<script>
								$(document).ready(function(){
									$("#textMachine").slotMachine({
										active	: 1,
										delay	: 450,
										repeat	: 1500
									});
								});
							</script>
						</div>
					</td>
				</tr>
			</table>
		</div> -->
		<div class="line" style="padding-top:50px;">
			<div class="content" style="text-align: center; background: url('./img/machine.png') no-repeat 50% 120px; height: 500px;">
				<div style="clear:both">
					<p class="title">三等奖 </p>
				</div>
				<div style="clear:both; margin-top: 250px;">
					<div id="machine4" class="slotMachine" style="margin-left: -65px;">
						<div class="slot slot1">苗健</div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="machine5" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2">苗健</div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="machine6" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3">苗健</div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<script>
						$(document).ready(function(){
							var machine4 = $("#machine4").slotMachine({
								active	: 0,
								delay	: 500
							});

							var machine5 = $("#machine5").slotMachine({
								active	: 1,
								delay	: 500
							});

							window.machine6 = $("#machine6").slotMachine({
								active	: 2,
								delay	: 500
							});
							
							$("#slotMachineButtonShuffle").click(function(){
								machine4.shuffle();
								machine5.shuffle();
								machine6.shuffle();
							});
							$("#slotMachineButtonStop").click(function(){
								if( machine4.isRunning() ){
									//True to stop now
									machine4.stop(true);
								}else{
									if( machine5.isRunning() ){
										machine5.stop(true);
									}else{
										if( machine6.isRunning() ){
											machine6.stop(true);
										}
									}

								}
							});
						});
					</script>
				</div>
			</div>
			<div class="content">
				<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">开始</div>
				<div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px;margin-right: 100px;">停止</div>
			</div>
		</div>
		<div id="footer" style="display: none">
			<div class="content">
				<div id="textMachine2">
					<div>我要中奖</div>
					<div>天呀，就让我中了吧</div>
					<div>我的，我的!</div>
				</div>
				<script>
					$(document).ready(function(){
						$("#textMachine2").slotMachine({
							active	: 1,
							delay	: 450,
							repeat	: 1500
						});
					});
				</script>
			</div>
		</div>
	</body>
</html>

